<template>
  <div class="indexBar">
    <van-nav-bar title="航班动态" left-arrow @click-left="onClickLeft">
      <template #right>
        <span @click="change()">西安咸阳</span>
      </template>
    </van-nav-bar>
    <div class="divBox">
      <van-tabs v-model="active">
        <van-tab title="出港">
          <el-table id="table1" :data="tableData" style="width: 100%">
            <el-table-column prop="flight" label="航班" width="72"> </el-table-column>
            <el-table-column prop="originate" label="始发" width="76"> </el-table-column>
            <el-table-column prop="planned" label="计划到达" width="60"> </el-table-column>
            <el-table-column prop="reach" label="实际到达" width="60"> </el-table-column>
            <el-table-column prop="terminal" label="航站楼" width="50"> </el-table-column>
            <el-table-column prop="status" label="状态" width="48">
              <template slot-scope="scope">
                <span style="color:green;" v-if="scope.row.status == 0">到达</span>
                <span style="color:red;" v-if="scope.row.status == 1">取消</span>
                <span style="color:orange;" v-if="scope.row.status == 2">延误</span>
              </template>
            </el-table-column>
          </el-table>
        </van-tab>
        <van-tab title="到港">
          <el-table id="table2" :data="childTableData" style="width: 100%">
            <el-table-column prop="flight" label="航班" width="73"> </el-table-column>
            <el-table-column prop="originate" label="始发" width="76"> </el-table-column>
            <el-table-column prop="planned" label="计划到达" width="60"> </el-table-column>
            <el-table-column prop="reach" label="实际到达" width="60"> </el-table-column>
            <el-table-column prop="terminal" label="航站楼" width="50"> </el-table-column>
            <el-table-column prop="status" label="状态" width="48">
              <template slot-scope="scope">
                <span style="color:green;" v-if="scope.row.status == 0">到达</span>
                <span style="color:red;" v-if="scope.row.status == 1">取消</span>
                <span style="color:orange;" v-if="scope.row.status == 2">延误</span>
              </template>
            </el-table-column>
          </el-table>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'redar',
  data(){
    return{
      problem:'',
      active:'',
      redar_list:[],
      tableData:[
        {id:1,flight:'SC8815',originate:'青岛胶东',planned:'16:05',reach:'11:57',terminal:'T2',status:0},
        {id:2,flight:'GS7858',originate:'昆明长水',planned:'16:05',reach:'16:06',terminal:'T2',status:0},
        {id:3,flight:'CZ6580',originate:'重庆江北',planned:'16:05',reach:'--',terminal:'T3',status:1},
        {id:4,flight:'3U1408',originate:'重庆江北',planned:'16:05',reach:'--',terminal:'T3',status:1},
        {id:5,flight:'ZH9223',originate:'广州白云',planned:'16:10',reach:'15:44',terminal:'T2',status:0},
        {id:6,flight:'CA3423',originate:'广州白云',planned:'16:10',reach:'15:44',terminal:'T2',status:0},
        {id:7,flight:'SC8815',originate:'青岛胶东',planned:'12:15',reach:'--',terminal:'T2',status:2},
        {id:8,flight:'SC8815',originate:'青岛胶东',planned:'12:15',reach:'--',terminal:'T2',status:2},
        {id:9,flight:'SC8815',originate:'青岛胶东',planned:'12:15',reach:'--',terminal:'T2',status:2},
        {id:10,flight:'SC8815',originate:'青岛胶东',planned:'12:15',reach:'--',terminal:'T2',status:2},
      ],
      childTableData:[
        {id:1,flight:'MU3406',originate:'上海虹桥',planned:'15:30',reach:'--',terminal:'T3',status:1},
        {id:2,flight:'MU3406',originate:'上海虹桥',planned:'15:30',reach:'15:37',terminal:'T3',status:0},
        {id:3,flight:'MU3406',originate:'上海虹桥',planned:'15:30',reach:'--',terminal:'T3',status:1},
        {id:4,flight:'MU3406',originate:'上海虹桥',planned:'15:30',reach:'--',terminal:'T3',status:2},
        {id:5,flight:'ZH9223',originate:'广州白云',planned:'16:10',reach:'15:44',terminal:'T2',status:0},
        {id:6,flight:'CA3423',originate:'广州白云',planned:'16:10',reach:'15:44',terminal:'T2',status:0},
        {id:7,flight:'MU3406',originate:'上海虹桥',planned:'15:30',reach:'--',terminal:'T3',status:2},
        {id:8,flight:'MU3406',originate:'上海虹桥',planned:'15:30',reach:'--',terminal:'T3',status:2},
        {id:9,flight:'SC8815',originate:'青岛胶东',planned:'16:05',reach:'11:57',terminal:'T2',status:0},
        {id:10,flight:'GS7858',originate:'昆明长水',planned:'16:05',reach:'16:06',terminal:'T2',status:0},
      ],
    }
  },
  mounted(){

  },
  methods:{
    onClickLeft(){
      this.$router.go(-1)
    },
    change(){
      this.$router.push({path:'/indexBar'})
    }
  }
} 
</script>

<style scoped>
.divBox{
    width: 100%;
    /* background-color: #fff; */
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: left;
    position: relative;
    margin-right: 4px;
    /* overflow-x: hidden; */
}
.indexBar{
  width: 100%;
  background-color: #fff;
}
.van-tabs{
  width: 100%;
  margin: 15px 0;
}
.van-tabs__content{
  width: 100%;
}
.problem{
  position: fixed;
  top: 10px;
  width: 355px;
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  z-index: 2;
}
.problem input{
  width: 275px;
  background-color: #f5f6f8;
  border-radius: 20px;
  height: 40px;
  margin: 10px 0 10px 10px;
  border: none;
  padding-left: 20px;
}
.van-icon{
  font-size: 12px;
  color: #cccccc;
  font-size: 40px;
  margin-top: 10px;
}
#table1,#table2{
  width: 100%;
  font-size: 12px!important;
  text-align: center;
  line-height: 30px;
}
</style>
